<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="keywords" content="{$Think.config.site.keywords}">
    <meta name="description" content="{:config('site.description')}">
	<title>{$Think.config.site.title} - 采购单列表</title>
	
	<link href="{$Think.config.site.resource_url}css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/animate.min.css" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/style.min.css?v=4.0.0" rel="stylesheet">
</head>

<style>
    .col-sm-12 {
		padding-left: 0;
		padding-right: 0;
	}

	.title {
		border-bottom: 1px solid #eee; 	
	}
	
	.foots {
		position: fixed;
		bottom: 0;
		width: 100%;
		line-height:40px;
	}
	.foots div{
		background-color:white;
	}
	.foots div a{
		color:inherit;
	}
	.foots .active{
		background-color:#666;
	}
	.foots .active a{
		color:white;
	}
	ul{
		list-style: none;
		padding:0;
	}
	.supplier_ul{
		position:absolute;
		z-index: 1000;
		top:34px;
		height:200px;
		width: 100%;
		overflow: auto;
		background: white;
		/*display: none;*/
	}
	.supplier_li{
		padding:0.5em 1em;
		border: 1px solid #eee;
	}
	.supplier_box{
		position: relative;
		z-index: 1000;
	}
	.is_show{
		width: 100%;
		height:34px;
	}
	.charge_phone{
		font-size: 14px;
		text-decoration: none;
		line-height: 34px;
		display: inline-block;
	}
	.cancel{
		line-height: 34px;
		display: inline-block;
	}
	.green{
		background: #A6EB94;
	}
	.feed-element{
		padding:5px !important;
	}
</style>

<body class="gray-bg">
	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>采购列表</h5>
					</div>
					<div class="ibox-content" style="display: block;" id="app">
						{volist name="purchase" id="v"}
							<div v-on:click='hideui' class="feed-activity-list">
								<div class="title">
									<h5>{:date('Y-m-d',strtotime($v.create_time))}</h5>
								</div>
								{volist name="v['list']" id="vo" key="k"}
									<div class="feed-element  {if($vo['real_num']==$vo['num'])} green {/if}" >
										<a href="javascript:;" class="pull-left">
											<img alt="image" width="50" height="50" src="{$vo.picture}">
										</a>
										<div class="media-body">
											<strong>({$vo.brand_name})</strong> {$vo.goods_name} <strong>【{$vo.spec_name}】【{$vo.specval_name}】</strong>
											<br>
											<small class="text-muted" style="font-size: 20px;">采购数量：{if($vo.real_num)}{$vo.real_num}{else/}0{/if}/{$vo.num}</small>
											{if($vo.real_num)}
												<button data-toggle="modal" style="font-size:15px;margin-bottom: 15px;" data-target="#modal-form{$vo.pg_id}" class="pull-right btn btn-primary btn-xs">修改</button>
											{else/}
												<button data-toggle="modal" style="font-size:15px;margin-bottom: 15px;" data-target="#modal-form{$vo.pg_id}" class="pull-right btn btn-primary btn-xs">采购</button>
											{/if}
											<div style="clear:both"></div>		
											<div style="float: left;">供应商电话：<a class="charge_phone" href="tel:{$vo.charge_phone}">{$vo.charge_phone}</a></div>
											<a data-pg_id="{$vo.pg_id}" class="cancel pull-right">取消采购</a>
										</div>
										<div class="actions" style="margin: 0">
											<small class="text-muted">售价：{$vo.price}</small>&emsp;
											{if($vo.real_num)}
												<small class="text-muted">采购价：{$vo.cur_price}</small>
											{else/}
												<small class="text-muted">上次采购价：{$vo.last_price}</small>
											{/if}
										</div> 
										<div class="actions">
											{volist name="vo['order']" id="val"}
												<small class="text-muted">{$val.receiver_name}: {$val.num}&nbsp;({$val.shop_name})</small> </br>
											{/volist}
										</div>
									</div>
									
									<div id="modal-form{$vo.pg_id}" class="modal fade in" aria-hidden="true">
										<div class="modal-dialog">
											<div class="modal-content">
												<div class="modal-header">
													<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
													<strong>({$vo.brand_name})</strong> {$vo.goods_name} <strong>【{$vo.spec_name}】</strong>
												</div>
												<div class="modal-body">
													<form class="form-horizontal myform" id="">
														<input type="hidden" name="pg_id" value="{$vo.pg_id}"/>
														<input type="hidden" name="specval_id" value="{$vo.specval_id}"/>
														<div class="input-group m-b">
															<div class="input-group-btn">
																<button class="btn btn-white" type="button">数量：</button>
															</div>
																<input type="number" name="real_num" class="form-control" value="{$vo.real_num ?: ''}" required >
															<div class="input-group-btn">
																<button class="btn btn-white" type="button">/ {$vo.num}</button>
															</div>
														</div>
														<div class="input-group m-b">
															<div class="input-group-btn">
																<button class="btn btn-white" type="button">价格：</button>
															</div>
															<input type="number" name="cur_price" class="form-control" value="{$vo.cur_price==0 ? '' : $vo.cur_price}" required step="0.01">
															<div class="input-group-btn">
																<button class="btn btn-white" type="button">/ {if($vo.last_price)}{$vo.last_price}{else/}{$vo.price}{/if}</button>
															</div>
														</div>
														<div class="input-group m-b">
															<div class="input-group-btn">
																<button class="btn btn-white" type="button">供应商：</button>
															</div>
															<div class="form-control" v-on:click.stop='showui'>
																<span v-if='ischoose' >{{show}}</span>
																<span v-else>{$vo.supplier_name}</span>
															</div>
															<div v-if="is_show"  class="supplier_box" id="supplier_box">
																<ul class="supplier_ul">
																	<span></span>
																	<input type="hidden" value="{{id}}" name="supplier_id" data-id="{$vo.supplier_id}">
																	<input type="text" v-on:click.stop name="supplier_num" id="supplier" class="supplier form-control" v-model='search'>
																	<div style="clear: both"></div>
																	<li @click='clear' class="supplier_li">无</li>
																	<li @click='choose(item.supplier_name,item.supplier_id,item.charge_phone)' v-for='item in searchData' class="supplier_li">{{item.supplier_name}}</li>
																</ul>
															</div>
														</div>
														
														<div class="input-group m-b" style="line-height: 32px;">
															<div class="input-group-btn">
																<button class="btn btn-white" type="button" style='border:0;' >支付情况：</button>
															</div>
															<input type="radio" class="i-checks" name="pay_status" {$vo.pay_status?'':'checked="checked"'} value='0'>未付
															<input type="radio" class="i-checks" name="pay_status" {$vo.pay_status?'checked="checked"':''} value='1'>已付

															<!-- <div class="input-group-btn">
																<button class="btn btn-white" type="button">/ {if($vo.last_price)}{$vo.last_price}{else/}{$vo.price}{/if}</button>
															</div> -->
														</div>
														<div class="input-group m-b" style="line-height: 32px;">
															<div class="input-group-btn">
																<button class="btn btn-white" type="button" style='border:0;' >申请改价：</button>
															</div>
															<input type="radio" class="i-checks" name="apply_price" {$vo.apply_price?'':'checked="checked"'} value='0'>不改
															<input type="radio" class="i-checks" name="apply_price" {$vo.apply_price?'checked="checked"':''} value='1'>改价
														</div>
														<button type="button" class="sub btn btn-block btn-outline btn-primary">确定</button>
													</form>
												</div>
											</div>
										</div>
									</div>
								{/volist}
							</div>
						{/volist}
					</div>
				</div>
			</div>
		</div>
		<!-- <div class="row foots">
			<div class="col-xs-6 {eq name="status" value="0"}active{/eq}" align="center"><a href="{:url('index',['status' => 0])}">待采购</a></div>
			<div class="col-xs-6 {eq name="status" value="1"}active{/eq}" align="center"><a href="{:url('index',['status' => 1])}">已采购</a></div>
		</div> -->
	</div>
	
	<script src="{$Think.config.site.resource_url}js/jquery.min.js?v=2.1.4"></script>
    <script src="{$Think.config.site.resource_url}js/bootstrap.min.js?v=3.3.5"></script>
    <script src="{$Think.config.site.resource_url}js/plugins/iCheck/icheck.min.js"></script>
	<script src="{$Think.config.site.common_resource_url}js/majax.js"></script>
	<script src="{$Think.config.site.resource_url}js/plugins/layer/layer.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script>
		var layer_font='';
		$(document).ready(function() {
			$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",});
			// $(".chosen-select").chosen({no_results_text: "没有找到：",width:'200px'});
		});

		$("body").delegate('.cancel','click',function(){
			var pg_id = $(this).data("pg_id");
			layer_font = layer.open({
				type: 2,
				title: '取消采购',
				shadeClose: true,
				shade: 0.8,
				area: ['90%', '60%'],
		        content: '{:url("cancel")}?pg_id='+pg_id, //iframe的url
		        // btn: ['确定', '取消']
		    });
		});

		var list = {$json_list};
		console.log(list)
		var vm = new Vue({
			el: '#app',
			data: {
				search: '',
				is_show:false,
				products: list,
				id:$('input[name="supplier_id"]').data('id'),
				show:'',
				phone:'',
				ischoose:false
			},
			methods:{
				showui:function() {
					this.is_show = true
				},
				hideui:function(){
					this.is_show = false
				},
				choose:function(e,id,phone){
					this.ischoose = true
					this.show = e
					this.id = id
					this.phone = phone
					console.log(this.id)
				},
				clear:function(){
					this.ischoose = true
					this.show = ''
					this.search = ''
					this.id = ''
					$('input[name="supplier_num"]').attr('placeholder','')
				}
			},
			computed: {
				searchData: function() {
					var search = this.search;
					if (search) {
						return this.products.filter(function(product) {
							return Object.keys(product).some(function(key) {
								return String(product[key]).toLowerCase().indexOf(search) > -1
							})
						})
					}
					return this.products;
				}
			}
		})
		$('.sub').on('click',function(){
			var f = $(this).closest('.myform');
			var formArray = f.serializeArray();
			var pay_status = 0
			var apply_price = 0
			for (var i = 0; i < formArray.length; i++) {
				if (formArray[i].name=='pay_status') {
					pay_status = formArray[i].value
				}
				if (formArray[i].name=='apply_price') {
					apply_price = formArray[i].value
				}
			}
			var formData = {
				pg_id:f.find('input[name="pg_id"]').val(),
				specval_id:f.find('input[name="specval_id"]').val(),
				real_num:f.find('input[name="real_num"]').val(),
				cur_price:f.find('input[name="cur_price"]').val(),
				supplier_id:vm.id,
				pay_status:pay_status,
				apply_price:apply_price
			}
			majax('{:url("Purchase/update")}',formData,function(d){
				if (d.code>0) {
					layer.msg(d.msg,{icon: 1});
					setTimeout(function(){
						location.reload();
					},1000);
				}else{
					layer.msg(d.msg, {icon: 5});
				}
			})
		});
		function editSuccess(d){
			layer.close(layer_font);
			layer.msg(d.msg, {icon: 1},function(){
				location.reload(true);
			});
		}
	</script>
</body>
</html>